import {Component} from 'react'
import Tab from './component/Tab'
import './App.css'
import Header from './component/Header'

class App extends Component {
  constructor(props){
    super()
    this.state = {
      // 刷新页面获取token
      todos:JSON.parse(localStorage.getItem("todos") ) || [],

      filterToDos:[] //用来渲染数据的任务数组
    }
  }

componentWillMount() {
  this.filterFn('all')

}

filterFn = (status) => {
  if(status == 'all'){
    this.setState({
      filterToDos:this.state.todos
    })
  } else {
       filterToDos : this.state.todos.filter(item => {
         return item.status === status
        })
  }

}


  // 获取header添加的todo
  getToDo = (data) => {
    this.state.todos.push(data)
    this.setState({
        todos:this.state.todos,
    })
    // 把数据存到token
    localStorage.setItem('todos',JSON.stringify(this.state.todos))
  }
  
  render() {
    let tab = [
      {
        name:"全部",
        status: 'all'
      }, {
        name:"正在进行",
        status: 'pending'
      }, {
        name:"已经完成",
        status: 'isFinished'
      }, {
        name:"删除",
        status: 'delete'
      },
    ]
    return (
        <div className='App'>
            <Header fn={this.getToDo} />
            <br/>
            <Tab list={tab} fn={this.filterFn}></Tab>
            <div className='content'>
              <ul>
                {
                  this.state.filterToDos.map((item,i) => {
                    return <li key={i}>
                      <input  type='checkbox' />
                      {item.name}
                      <button onClick={
                        () => {
                          item.status = 'delete'
                          this.filterFn('all')
                        }
                      }>删除</button>
                    </li>
                  })
                }
              </ul>
            </div>
        </div>
    )
  }
}

export default App;
